<template>
    <div>
        <div style="height:0.9rem;"></div>
        <div class="health-banner">
            <img :src="img" alt="">
        </div>
        <!-- 养生知识 -->
        <div class="yszs-box">
            <div class="yszs-box-title">养生知识</div>
            <div class="yszs-item border flex flex-align-center" @click="toDetailes(item.id)" v-for="(item,index) in health" :key="index">
                <img :src="item.path" alt="">
                <div class="text-cont">
                    <p class="title">{{item.tile}}</p>
                    <p class="cont">{{item.content}}</p>
                </div>
            </div>
            <!-- 查看更多 -->
            <div class="more flex flex-align-center flex-pack-center">
                <p>查看更多</p>
            </div>
        </div>
        <!-- 专题推荐 -->
        <div class="yszs-box" style="padding:0 0 0.2rem 0">
            <div class="yszs-box-title" style="margin-top:0.22rem;margin-left:0.3rem;">专题推荐</div>
            <div class="list-box clearfix" >
                <div class="list-box-item" v-for="(item,index) in special" :key="index" @click="toDetailes(item.id)">
                    <img :src="item.images" alt="">
                    <p>{{item.title}}</p>
                </div>
            </div>
        </div>
        <Recommend :recommoned="recommoned" v-on:Detailes="toPage"></Recommend>
    </div>
</template>
<script>
import Recommend from '@/components/common/Recommend'
export default {
    data () {
        return {
            img:'',
            recommoned:'',
            health:'',
            special:'',
        }
    },
    created () {
        this.$store.commit('setTitle',"健康养生");
        this.apiIndexHealth();
    },
    components:{
        Recommend
    },

    methods: {
        async apiIndexHealth(){
            let {data} = await this.https.get(this.api.apiIndexHealth);
            this.img = data.img;
            this.recommoned = data.recommoned;
            this.health = data.health;
            this.special = data.special;
        },

        toDetailes(id){
            this.$store.commit('setTitle',"健康养生");
            this.$router.push(`/info/${id}`);
        },

        toPage(id){
            this.$store.commit('setTitle',"推荐内容");
            this.$router.push(`/info/${id}`);
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../assets/css/health/health.less);
</style>


